<%--
  Created by IntelliJ IDEA.
  User: yuyufeng
  Date: 2018/1/22
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>滑动验证码测试</title>
    <script src="static/jquery.js"></script>
    <style>
        body{
            margin:0;
            padding:0;
            border:0;
        }
        #validImage-cut{
            left:600px;
            z-index:100;
            width:80px;
            height:80px;
            background-color:#00FF66;
            position:absolute;
        }

        #validImage{
            z-index:20;
            background-color:#CCCCCC;
            width:550px;
            height:400px;
        }
    </style>
</head>

<body>
<image id="validImage-cut" ></image>
<image id="validImage"></image>
<h3>滑动验证码测试</h3>
<p>当前滑块坐标：<b id="locationNow">600,0</b></p>
</body>
<script>




    var isMove = false;
    this.vic = document.getElementById("validImage-cut");
    this.vi = document.getElementById("validImage");
    var offsetX;
    var offsetY;
    var canAutoSet = false;



    $.get("/validImageJson", function (res) {
        var res = JSON.parse(res)
        if (res.status == 200) {
            vic.style.backgroundImage = "url('/validImageLocation')"
            vi.style.backgroundImage = "url('/validImage')"
        }
    })

    this.vic.addEventListener("mousedown",function(e){
        isMove = true;
        //console.log(e)
        //鼠标点击的坐标
        //var clientX = e.clientX
        //var clientY = e.clientY
        //获取图像坐标
        offsetX = e.offsetX
        offsetY = e.offsetY
        //console.log("鼠标坐标："+e.clientX+' '+e.clientY)
        //console.log(offsetX+' '+offsetY)

    },false);


    this.vi.addEventListener("mousemove",function(e){
        //console.log("鼠标坐标："+e.clientX+' '+e.clientY)
        if(isMove){

            var vicY = e.clientY - offsetY
            var vicX = e.clientX - offsetX

            //console.log(vicX+' '+vicY)
            //console.log('canAutoSet:'+canAutoSet)
            if(canAutoSet){
                if(vicY > 400-80){
                    vicY = 400-80
                    isMove = false;
                }
                if(vicY < 0){
                    vicY = 0
                    isMove = false;
                }

                if(vicX > 550-80){
                    vicX = 550-80
                    isMove = false;
                }

                if(vicX < 0){
                    vicX = 0
                    isMove = false;
                }
            }

            vic.style.top = vicY
            vic.style.left = vicX
            document.getElementById("locationNow").innerHTML = vicX+','+ vicY
        }
    },false);


    this.vi.addEventListener("mouseover",function(e){
        if(isMove && !canAutoSet){
            var vicY = e.clientY - offsetY
            var vicX = e.clientX - offsetX

            if(vicX < 470 && vicY<320){
                canAutoSet = true;
            }

        }


    },false)



    this.vi.addEventListener("mouseup",function(e){
        console.log('vi-mouseup')
        //console.log("鼠标坐标："+e.clientX+' '+e.clientY)
        if(isMove){
            var vicY = e.clientY - offsetY
            var vicX = e.clientX - offsetX

            console.log(vicX+' '+vicY)

            if(vicY > 400-80){
                vicY = 400-80
                isMove = false;
            }
            if(vicY < 0){
                vicY = 0
                isMove = false;
            }

            if(vicX > 550-80){
                vicX = 550-80
                isMove = false;
            }

            if(vicX < 0){
                vicX = 0
                isMove = false;
            }

            vic.style.top = vicY
            vic.style.left = vicX

        }
        isMove = false;
    },false);

    this.vic.addEventListener("mouseup",function(e){
        console.log('vic-mouseup')
        if(isMove){
            var vicY = e.clientY - offsetY
            var vicX = e.clientX - offsetX

            if(vicY > 400-80){
                vicY = 400-80
                isMove = false;
            }
            if(vicY < 0){
                vicY = 0
                isMove = false;
            }

            if(vicX > 550-80){
                vicX = 550-80
                isMove = false;
            }

            if(vicX < 0){
                vicX = 0
                isMove = false;
            }
            vic.style.top = vicY
            vic.style.left = vicX
            isMove = false;
            document.getElementById("locationNow").innerHTML = vicX+','+ vicY
        }
    },false);




</script>
</html>